<template>
  <editor v-model="editorValue" :init="init"
          api-key="7a8g2fnpj9juq570cyued3oei9ay6yc766tloiu91qb68pvo"></editor>
</template>

<script setup>
import {reactive, ref, toRefs, watch} from 'vue';
import {UploadImage} from '@/api/base';
import {isNullOrUnDef} from '@/utils/is';
import tinymce from 'tinymce/tinymce.js';
import 'tinymce/models/dom'; // (TinyMCE 6)
// 外觀
import 'tinymce/skins/ui/oxide/skin.css';
import 'tinymce/themes/silver';

// Icon
import 'tinymce/icons/default';

// 用到的外掛
import 'tinymce/plugins/emoticons';
import 'tinymce/plugins/emoticons/js/emojis.js';
import 'tinymce/plugins/accordion';
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/anchor';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/autoresize';
import 'tinymce/plugins/autosave';
import 'tinymce/plugins/charmap';
import 'tinymce/plugins/code';
import 'tinymce/plugins/codesample';
import 'tinymce/plugins/directionality';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/help';
import 'tinymce/plugins/image';
import 'tinymce/plugins/importcss';
import 'tinymce/plugins/insertdatetime';
import 'tinymce/plugins/link';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/media';
import 'tinymce/plugins/nonbreaking';
import 'tinymce/plugins/pagebreak';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/quickbars';
import 'tinymce/plugins/save';
import 'tinymce/plugins/searchreplace';
import 'tinymce/plugins/table';
import 'tinymce/plugins/visualblocks';
import 'tinymce/plugins/visualchars';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/help/js/i18n/keynav/en.js';
import 'tinymce/plugins/help/js/i18n/keynav/zh_CN.js';

// 語言包
import 'tinymce-i18n/langs7/zh_CN.js';

// TinyMCE-Vue
import Editor from '@tinymce/tinymce-vue';

console.log(tinymce)

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  plugins: {
    type: [String, Array],
    default: 'fontsize fullscreen image accordion advlist anchor autolink autoresize autosave charmap code codesample directionality emoticons fullscreen help image importcss insertdatetime link lists media nonbreaking pagebreak preview quickbars save searchreplace table visualblocks visualchars wordcount',
  },
  toolbar: {
    type: [String, Array],
    default:
      'fullscreen bold italic underline strikethrough image | fontsize | forecolor backcolor | alignleft aligncenter alignright alignjustify|bullist numlist |outdent indent blockquote | undo redo | axupimgs | removeformat | table | emoticons | code',
  },
});

const emit = defineEmits(['update:modelValue']);

const init = reactive({
      language: 'zh_CN',
      min_height: 326,
      menubar: false,
      content_css: false,
      skin: false,
      plugins: props.plugins,
      toolbar: props.toolbar,
    font_size_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px',
      quickbars_insert_toolbar: false,
      branding: false,
      images_upload_url: '123',
      relative_urls:false,
      remove_script_host: false,
      images_upload_handler: function (blobInfo, success, failure) {
        console.log(blobInfo)
        // if (!checkFileType(componentSetting.upload.imageType, blobInfo.type)) {
        //   message.error(`只能上传图片类型为${componentSetting.upload.imageType.join(',')}`);
        //   console.log('Upload failed');
        //   return;
        // }
        return new Promise((resolve, reject) => {
          let formDataaa = new FormData();
          formDataaa.append('file', blobInfo.blob());
          UploadImage(formDataaa)
            .then((res) => {
              console.log(res);
              resolve(res.fileUrl);
              // success(res.fileUrl)
            })
            .catch((err) => {
              reject('Upload failed');
              console.error('Error:', err);
            });
        })
      },
    }
  )
;

const {modelValue} = toRefs(props);
const editorValue = ref(modelValue.value);

watch(modelValue, (newValue) => {
  editorValue.value = newValue;
});

watch(editorValue, (newValue) => {
  emit('update:modelValue', newValue);
});

function checkFileType(map, fileType) {
  if (isNullOrUnDef(map)) {
    return true;
  }
  return map.includes(fileType);
}

</script>

<style scoped>

</style>
